<template>
  <!-- 主体显示数据-号码-搜索-下一页 -->
  <div>
    <div class="choose-box">
      <div class="ditionCenter-box">
        <!-- 归属地选择 -->
        <div class="address-box">
          <div class="address-text">
            <div class="fl address" @click="getaddress()">
              <!--  @click="getpus()" -->
              <span>归属地:(可选择)</span>
              <span class="address-address-text"
                >{{ addressProvince }} {{ addressCity }}</span
              >
            </div>
            <div class="fl">
              <span class="address-icon">
                <!-- <van-icon name="location-o" size="1.5625rem" /> -->
              </span>
            </div>
          </div>
        </div>
        <van-popup
          v-model="addressisShow"
          position="left"
          :style="{ width: '80%', height: '100%' }"
        >
          <van-tree-select
            height="100%"
            @click-item="mapSelection"
            :max="2"
            :items="items"
            selected-icon
            :active-id.sync="activeId"
            :main-active-index.sync="activeIndex"
          />
        </van-popup>
        <!-- 跳动动画 -->
        <!-- <div class="submit" v-show="contentisShow">
          <div class="triangle"></div>
          <div class="content">
            <div class="fl content-text-icon">
              <i class="iconfont icon-ditu1 submit-ditu-icon"></i>
            </div>

            <div class="fl content-text" @click="getaddress()">
              <span>请选择您的归属地哦！</span>
            </div>
            <div class="fl content-close" @click="contentDemo()">
              <i class="iconfont icon-guanbi submit-guanbi-icon"></i>
            </div>
          </div>
        </div> -->
        <!-- 搜索 -->

        <div class="search">
          <van-field
            autosize
            clearable
            input-align="center "
            v-model="message"
            class="search-input"
            clear-trigger="always"
            type="digit"
            placeholder="王上 请输入您喜欢的数字"
            inputmode="decimal"
            maxlength="4"
          >
            <template #button>
              <van-button
                @click="searchBtn()"
                color="#FAE0AF"
                class="search-button"
                round
                type="info"
                icon="search"
                >搜索</van-button
              >
            </template>
          </van-field>
        </div>
        <!-- 大家都在搜 -->
        <div class="beautiful-box">
          <div class="beautiful-box-color beautiful_text_num">
            <div class="fl beautiful_text">
              <span>热搜 :</span>
            </div>
            <!--  -->
            <div
              class="fl beautiful_num"
              :class="{ beautiful_color: index == hotsearchcolor }"
              v-for="(item, index) in hotSearch"
              :key="index"
              @click="hotSearchColor(index)"
            >
              <span>
                <a>{{ item }}</a>
              </span>
            </div>
          </div>
        </div>
        <!-- AAAA BBAA -->
        <div class="beautiful-box">
          <div class="beautiful-box-color">
            <div
              class="fl beautiful"
              :class="{ beautiful_color: index == beautifulcolor }"
              @click="beautifulColor(index)"
              v-for="(item, index) in beautiful"
              :key="index"
            >
              <span>{{ item }}</span>
            </div>
          </div>
        </div>
        <!-- 号码展示 -->
        <div class="numberShow-box">
          <div v-show="numberisShow">
            <div
              class="numberShow fl"
              v-for="(item, index) in phoneData"
              :key="index"
              @click="numberShow(index)"
              :class="{ setPhoneBeautiful: index == getcolor }"
            >
              <i
                :class="{ setNumberShow_icon: index == getcolor }"
                class="iconfont icon-bianzu39beifen9 numberShow-icon"
              ></i>
              <div>
                <!-- haoma   phoneNumber -->
                <div class="flnumberShow-hm">
                  <!--  -->
                  <span
                    v-for="(phoneItem, phoneIndex) in 11"
                    :key="phoneIndex"
                    :class="setPhoneColor(item.lhArr[phoneIndex])"
                    >{{ item.phone.split("")[phoneIndex] }}</span
                  >
                </div>
                <!-- 标注 -->
                <p class="flnumberShow-content">
                  <!-- 价格 -->
                  <span class="flnumberShow-jiage"
                    >￥{{ item.priceCount }}</span
                  >
                  <!-- 限时免费 -->
                  <span class="flnumberShow-text">限时免费</span>
                </p>
              </div>
            </div>
          </div>
          <div v-show="dataNothing">
            <div class="numberShows-data">
              <span>王上,臣妾真的找不到,请换个类型帮您找</span>
            </div>
          </div>
        </div>

        <div class="paging-box" id="orderDetails">
          <van-button
            v-bind:disabled="isdisabled"
            type="info"
            class="paging-btn-fl fl"
            @click="pagingPut()"
          >
            <div class="but-fr">
              <i class="iconfont icon-fangxiang-fl btn-icon-fr"></i>
              <div class="paging-box-xia-l fr">上一页</div>
            </div>
          </van-button>
          <van-button
            type="info"
            class="paging-btn-fl fl"
            @click="pagingOn()"
            v-bind:disabled="isdisabledDown"
          >
            <div>
              <div class="paging-box-xia-r fl">下一页</div>
              <i class="iconfont icon-fangxiang-fr btn-icon-fl"></i>
            </div>
          </van-button>
        </div>
        <!-- 下一页靓号会更多~快快点击靓号加入购物车吧!!! -->
        <!-- <div class="text_st">
      <div class="text_st-icon ">
        <i class="iconfont icon-huo1 " />
      </div>
      <div>
        <span>多刷几次更容易刷到靓号哦!点靓号加右下角购物车!!</span>
      </div>
    </div> -->
        <!-- 订单详情 v-bind:-->
        <div class="orderDetails">
          <orderDetails
            v-bind:orderDetails="orderDetails"
            v-bind:checkboxData="checkboxData"
            ref="orderDetails"
          ></orderDetails>
        </div>
        <!-- end -->
      </div>

      <!-- 0 圆包邮到家 -->
      <button
        @click="SubmitParams()"
        :disabled="submitDisabled"
        id="submit-btn--js"
        class="submit van-button van-button--primary van-button--normal van-button--block"
        style="
          color: rgb(255, 255, 255);
          background: rgb(254, 67, 101);
          border-color: rgb(254, 67, 101);
        "
      >
        <div class="van-button__content">
          <span>0元领取，包邮到家</span>
        </div>
      </button>
      <div class="checkbox" @click="checkboxs">
        <van-checkbox
          icon-size=".4rem"
          v-model="checked"
          style="margin-top: -0.01rem; width: 38% !important"
        >
          <span style="color: #fff !important">同意并阅读</span>
        </van-checkbox>

        <agreementStatement></agreementStatement>
      </div>

      <!-- 详细备注 -->
      <!-- <div class="line">
          <div class="left">
            <p>
              根据国家手机号卡实名要求，请如实填写以上信息，以便我们及时为您送达。。
            </p>
            <p>
              本活动为阶段性优惠活动，发布数量有限，请保持联系号码畅通，我们可能随时与您联系，电话无人接听或恶意下单，将不予发货。
            </p>
          </div>
        </div> -->
      <!-- 热门评论 -->
      <div>
        <topComments></topComments>
      </div>
      <!-- end -->
      <div style="margin-top: 0.5rem">
        <img style="width: 100%" src="../assets/images/h02.jpg" alt="" />
      </div>
      <!-- 更多免流App -->
      <div style="margin-top: 0.4rem">
        <moreBenefits> </moreBenefits>
      </div>
      <!-- end -->
      <div>
        <img style="width: 100%" src="../assets/images/h03.jpg" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
// 地图js
import phoneAddressLists from "../assets/js/phoneAddressLists";
import ruleTransformation from "../assets/js/ruleTransformation";
import getHttpsData from "../https/getHttpsData";
import orderDetails from "../components/orderDetails";
import topComments from "../components/topComments";
import moreBenefits from "../components/moreBenefits";
import agreementStatement from "../components/agreementStatement";

export default {
  components: {
    // 详情页面
    orderDetails,
    // 热门评论
    topComments,
    // 更多App 免流
    moreBenefits,
    // 协议与声明
    agreementStatement,
  },
  data() {
    return {
      // 传递数据给子组件
      orderDetails: "",
      checkboxData: "",
      // columns: addressLists,
      // 归属地选择
      addressProvince: "北京",
      addressCity: "北京市",
      activeId: "",
      activeIndex: "",
      // 归属地 地图
      addressisShow: false,
      items: phoneAddressLists,
      //   跳动动画
      contentisShow: true,
      //   请求参数
      params: {
        phoneProvinceCode: "11",
        phoneCityCode: "110",
        cardCode: "981610241535",
        searchValue: "",
        page: "",
        channel: "",
        account: "",
        plan: "",
        originality: "",
        clickId: "",
      },
      message: "",
      hotSearch: ["88", "66", "999", "520", "1314"],
      hotsearchcolor: NaN,
      beautiful: [
        "全部",
        "AAA+",
        "AABB",
        "ABAB+",
        "AAAAA",
        "爱情号",
        // "A4+",
        // "发财号",
      ],
      beautifulcolor: 0,
      //   号码展示
      numberisShow: true,
      //
      phoneNumberLists: [],
      AllphoneNumberLists: [],
      phoneData: [],
      isdisabled: true,
      dataNothing: false,
      isdisabledDown: false,
      getcolor: NaN,
      removeArr: [],
      // 详情页面
      numberShowIsShow: false,
      detailsData: [],
      detailsAddressProvince: "",
      detailsAddressCity: "",
      sendAddressInput: [],
      numberData: [],
      detailedAddress: null,
      areaShow: false,
      mobilePhoneId: "",
      certificateName: "",
      certificateNumberId: "",
      areaListCenter: "",
      checked: true,
      submitDisabled: false,
      selectedData: {},

      selectedPhone: {},
      phoneData: [],
      goodsAddress: {
        provinceCode: "",
        provinceName: "",
        cityCode: "",
        cityName: "",
      },
      search: "beautiful",
      pageNum: 0,
    };
  },
  methods: {
    addonCancel() {
      this.areaShow = false;
    },
    setPhoneColor(item) {
      // 0=红色；1=黑色；2=蓝色
      if (item == 0) {
        return "set-phone-red";
      }
      if (item == 1) {
        return "set-phone-black";
      }
      if (item == 2) {
        return "set-phone-blue";
      }
    },
    getaddress() {
      this.getcolor = NaN;
      this.addressisShow = true;
    },
    mapSelection(data) {
      console.log(data);
      out: for (let i = 0; i < this.items.length; i++) {
        let shudi = this.items[i].children;
        for (let j = 0; j < shudi.length; j++) {
          if (data.id == shudi[j].id) {
            this.addressProvince = this.items[i].text;
            this.params.phoneProvinceCode = this.items[i].provinceId;
            this.addressCity = data.text;
            this.params.phoneCityCode = data.id;
            console.log("省份数据", this.items[i]);
            console.log("城市id", shudi[j]);
            break out;
          }
        }
      }
      this.getLookupData();
      this.hotsearchcolor = NaN;
      this.addressisShow = false;
      this.message = "";
    },
    // 关闭归属地动画
    contentDemo() {
      this.contentisShow = false;
    },
    // 搜索
    searchBtn() {
      // 搜索号码
      if (this.message != this.hotSearch[this.hotsearchcolor]) {
        this.getcolor = NaN;
        this.hotsearchcolor = NaN;
      }
      this.search = "search";
      this.pageNum = 0;
      this.beautifulcolor = 0;
      this.getLookupData(this.message, "", false);
    },
    // 大家都在搜
    hotSearchColor(index) {
      this.getcolor = NaN;
      this.search = "search";
      this.message = this.hotSearch[index];
      this.getLookupData(this.message, "", false);

      this.hotsearchcolor = index;

      this.beautifulcolor = 0;
    },
    // 动态添加类
    beautifulColor(index) {
      this.$toast.loading({
        forbidClick: true,
        duration: 500,
      });
      this.getcolor = NaN;
      this.hotsearchcolor = NaN;
      if (index == 0) {
        this.search = "index";
      }
      this.search = "beautiful";
      this.getLookupData("", index);
      this.beautifulcolor = index;
      // 重置搜索框
      this.message = "";
    },
    checkboxs() {
      //  this.checkbox =this.checked
      this.checkboxData = this.checked;
    },

    // 选择手机号
    numberShow(index) {
      this.numberShowIsShow = true;

      this.phoneData[index].addressCity = this.addressCity;
      this.phoneData[index].addressProvince = this.addressProvince;
      this.detailsData = this.phoneData[index].phone;

      this.detailsAddressProvince = this.addressProvince;
      this.detailsAddressCity = this.addressCity;
      // 添加
      this.getcolor = index;
      this.shoppingData(index);

      // 设置详情页地图默认
      // 购物车数据交互
      // this.shoppingNumber();
      // this.deletePhone();
      // this.beforeCreate();
      console.log("选择号码");
      this.selectQuestion();
      console.log("选择号码1");
    },
    // 储存数据格式
    shoppingData(index) {
      // 整合数据上传
      let integration = {};
      integration.selected = this.selectedData;
      integration.goods = this.goodsAddress;
      integration.checked = this.checked;
      this.orderDetails = integration;

      console.log(this.selectedData);
      console.log(this.goodsAddress);
      this.selectedData.lhArr = this.phoneData[index].lhArr;
      this.selectedData.phone = this.phoneData[index].phone;
      this.selectedData.priceCount = this.phoneData[index].priceCount;
      this.selectedData.type = this.phoneData[index].type;

      // 获取所在地区机号的数据 添加到本地储存
      this.selectedPhone.filterItem = this.selectedData;

      // 省
      this.goodsAddress.provinceCode = this.params.phoneProvinceCode;
      this.goodsAddress.provinceName = this.phoneData[index].addressProvince;
      // 市
      this.goodsAddress.cityCode = this.params.phoneCityCode;
      this.goodsAddress.cityName = this.phoneData[index].addressCity;

      this.selectedPhone.goodsAddress = this.goodsAddress;
      // 储存
      this.setLocalStorage("orderList", this.selectedPhone);
    },
    // 手机号储存到本地
    // 设置localStorage
    setLocalStorage(key, data) {
      var oldVal = this.getLocalStorage(key);
      data.time = new Date().getTime();
      if (
        oldVal &&
        Object.prototype.toString.call(oldVal) === "[object Array]"
      ) {
        var exist = false;
        for (var i = 0; i < oldVal.length; i++) {
          if (oldVal[i].filterItem.phone === data.filterItem.phone) {
            exist = true;
            break;
          }
        }
        if (!exist) {
          oldVal.push(data);
          localStorage.setItem(key, JSON.stringify(oldVal));
        }
      } else {
        localStorage.setItem(key, JSON.stringify([data]));
      }
    },
    // 移除localStorage 在倒计时结束的时候
    removeLocalStorage(list) {
      var oldVal = this.getLocalStorage("orderList");
      if (
        !list ||
        Object.prototype.toString.call(list) !== "[object Array]" ||
        !oldVal ||
        Object.prototype.toString.call(oldVal) !== "[object Array]"
      ) {
        return;
      }
      list = list.map(function (item) {
        return item.filterItem.phone;
      });
      oldVal = oldVal.filter(function (item) {
        return !list.includes(item.filterItem.phone);
      });
      localStorage.setItem("orderList", JSON.stringify(oldVal));
    },

    //搜索事件 返回10个数组 s   sss
    getLookupData(searchBtn, currentShowPhoneNumberIndex, isShow) {
      this.$toast.loading({
        forbidClick: true,
        duration: 400,
      });
      if (this.removeArr.length) {
        this.removeLocalStorage(this.removeArr);
      }
      this.params.searchValue = searchBtn;
      // 详情页
      this.detailsAddressProvince = this.addressProvince;

      this.detailsAddressCity = this.addressCity;
      // 获取参数并上传
      this.params.page = this.getUrlQueryString({ name: "page" });
      this.params.channel = this.getUrlQueryString({ name: "channel" });
      this.params.account = this.getUrlQueryString({ name: "account" });
      this.params.plan = this.getUrlQueryString({ name: "adid" });
      this.params.originality = this.getUrlQueryString({ name: "creativeid" });
      this.tipsToast("toast");
      this.params.clickId = this.getUrlQueryString({ name: "clickid" });
      getHttpsData
        .httpPost("/unicombj/phoneSelect.do", this.params)
        .then((res) => {
          this.tipsToast("10");
          // console.log(res);
          //调用 遍历数组给号码添加标识用于不同的颜色
          let filterLists = ruleTransformation.filterPhoneNumberLists(
            res.obj,
            currentShowPhoneNumberIndex,
            searchBtn
          );

          var phoneNumberLists = [];
          var num = 0;
          // 如果没有数据
          if (filterLists.length <= 0 || filterLists == "") {
            this.numberisShow = false;
            this.dataNothing = true;
            this.hotsearchcolor = NaN;
            (this.message = ""),
              this.$toast.loading({
                forbidClick: true,
              });
            this.beautifulcolor = 0;
            if (
              this.params.phoneCityCode != "" &&
              this.params.phoneProvinceCode != ""
            ) {
              this.getLookupData("", "", true);
              setTimeout(() => {
                this.dataNothing = false;
                this.numberisShow = true;
              }, 1000);
            } else {
              this.params.phoneCityCode = "110";
              this.params.phoneProvinceCode = "11";
            }
          }
          if (filterLists && filterLists.length > 0) {
            currentShowPhoneNumberIndex = 0;
            while (filterLists.length) {
              phoneNumberLists.push(
                filterLists.splice(num * 10, (num + 1) * 10)
              );
            }
            //
            // 为搜索的时候
            if (!isShow) {
              this.phoneNumberLists = phoneNumberLists;
              this.phoneData = this.phoneNumberLists[0];
            } else {
              this.AllphoneNumberLists = this.AllphoneNumberLists.concat(
                phoneNumberLists
              );
              this.phoneNumberListsIndex = 0;
              this.phoneData = this.AllphoneNumberLists[0];
            }
          }
        })
        .catch(() => {
          // 数据没有或者请求错误的时候
          this.phoneNumberLists = NaN;
          this.dataNothing = true;
        });
    },
    //加载动画
    tipsToast(duration) {
      this.$toast.loading({
        forbidClick: true,
        duration: duration,
      });
    },
    // 获取url地址并截取
    getUrlQueryString({
      name,
      str = decodeURIComponent(window.location.search),
    }) {
      let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"),
        r = "";
      r =
        str.indexOf("?") != -1
          ? str.substr(str.indexOf("?") + 1).match(reg)
          : str.match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    // pagingPut 上一页
    pagingPut() {
      this.pageNum = this.pageNum - 1;
      this.getcolor = NaN;
      let resArr = this.AllphoneNumberLists;
      let searchData = this.phoneNumberLists;
      let nowPage = this.pageNum;
      this.isdisabledDown = false;

      if (this.search == "search") {
        if (nowPage <= 0) {
          this.getLookupData(this.message, "");
          this.$toast.loading({
            forbidClick: true,
          });
          resArr = this.phoneNumberLists;
        }
        this.phoneData = searchData[this.pageNum - 1];
      }
      if (this.search == "beautiful" && this.beautifulcolor != 0) {
        if (nowPage <= 0) {
          this.getLookupData("", this.beautifulcolor);

          resArr = this.AllphoneNumberLists;
        }
      }
      // 默认
      if (this.search == "beautiful" && this.beautifulcolor == 0) {
        if (nowPage <= 0) {
          this.getLookupData();
        } else {
          this.phoneData = resArr[nowPage];
        }
      }
    },

    // pagingOn 下一页
    pagingOn() {
      console.log(this.phoneData);
      this.isdisabled = false;
      if (this.pageNum <= 0) {
        this.pageNum = 0;
      }
      this.pageNum = this.pageNum + 1;
      this.getcolor = NaN;
      let nowPage = this.pageNum;

      // 全部 初始
      let resArr = this.AllphoneNumberLists;
      // AAA
      // 搜索
      let searchData = this.phoneNumberLists;
      if (this.search == "search") {
        // 最后一组数据
        if (this.pageNum == searchData.length) {
          this.getLookupData(this.message, "");
          searchData = this.phoneNumberLists;
          this.pageNum = -1;
        }
        // 不是最后一组的时候
        this.phoneData = searchData[this.pageNum];
      }
      // AAA 优化
      if (this.search == "beautiful" && this.beautifulcolor != 0) {
        this.getLookupData("", this.beautifulcolor);
        resArr = this.AllphoneNumberLists;
        if (nowPage == resArr.length) {
          this.getLookupData("", this.beautifulcolor);
          this.phoneData = searchData[nowPage];
          resArr = this.AllphoneNumberLists;
        }
      }
      // 默认情况
      if (this.search == "beautiful" && this.beautifulcolor == 0) {
        if (nowPage >= 3) {
          this.phoneData = [];
          this.getLookupData("", "", true);
          this.pageNum = 0;
        } else {
          this.phoneData = resArr[nowPage];
        }
      }
    },
    SubmitParams() {
      this.$refs.orderDetails.getSubmitParams();
    },

    // 页面开始的时候 获取数据
    userlocations() {
      getHttpsData
        .httpPost("/ipAddress/get.do", {})
        .then((res) => {
          if (res && res.obj && res.obj.province && res.obj.city) {
            // 省
            let province = res.obj.province;
            // 市
            let city = res.obj.city;
            let provinceChildren, provinceName, cityName, provinceId, cityId;
            out: for (let i = 0; i < this.items.length; i++) {
              let dataProvince = this.items[i];
              provinceName = dataProvince.text;

              if (provinceName && provinceName.indexOf(province) != -1) {
                // 省内的市区
                provinceChildren = dataProvince.children;
                if (provinceChildren && provinceChildren.length > 0) {
                  for (let j = 0; j < provinceChildren.length; j++) {
                    let dataCity = provinceChildren[j];
                    cityName = dataCity.text;

                    if (cityName && cityName.indexOf(city) != -1) {
                      // 省
                      this.addressProvince = provinceName;
                      provinceId = dataProvince.provinceId;
                      this.params.phoneProvinceCode = provinceId;
                      // 市区
                      cityId = dataCity.id;
                      this.addressCity = cityName;
                      this.params.phoneCityCode = cityId;
                      this.activeId = cityId;
                      break out;
                    }
                  }
                }
              }
            }
            // 设置回显
            for (let i = 0; i < this.items.length; i++) {
              if (this.addressProvince == this.items[i].text) {
                this.activeIndex = i;
              }
            }
          }
          this.getLookupData("", "", true);
        })
        .catch(() => {
          this.getLookupData("", "", true);
        });
    },

    // 获取localStorage 在点击购物车的时候
    getLocalStorage(key) {
      var val = localStorage.getItem(key);
      try {
        val = JSON.parse(val);
        return val;
      } catch (e) {
        return null;
      }
    },
    /// 倒计时结束
    deletePhone() {
      this.shoppingNumber();
      this.numberData = this.getLocalStorage("orderList");
      let numberData = this.numberData;
      let timeNode, timeRemaining;
      let arr = [];
      if (numberData != null) {
        for (let i = 0; i < numberData.length; i++) {
          // 防止购物车数据污染
          if (numberData[i].filterItem.addressCity == NaN) {
            arr.push(numberData[i]);
            this.removeLocalStorage(arr);
          }
          timeNode = new Date().getTime() - numberData[i].time;
          timeRemaining = 9000000 - timeNode;
          this.numberData[i].timeS =
            new Date(timeRemaining).getSeconds() < 10
              ? "0" + new Date(timeRemaining).getSeconds()
              : new Date(timeRemaining).getSeconds();
          this.numberData[i].time =
            new Date(timeRemaining).getMinutes() < 10
              ? "0" + new Date(timeRemaining).getMinutes()
              : new Date(timeRemaining).getMinutes();
          if (numberData[i].time > "31") {
            arr.push(numberData[i]);
          }
          if (numberData[i].time == "00" && numberData[i].timeS == "00") {
            this.shoppingNumber();
            arr.push(numberData[i]);
          }
        }
      }
      if (numberData != null) {
        if (arr.length > 0) {
          this.removeLocalStorage(arr);
        }
      }

      let _this = this;
      var intervalTimers = setTimeout(function () {
        timeRemaining -= 1000;

        _this.deletePhone();
      }, 1000);
      if (numberData == null || numberData.length <= 0) {
        clearTimeout(intervalTimers);
      }

      // if (numberData != null) {
      //   if (numberData.length <= 0) {
      //     clearTimeout(intervalTimers);
      //   }
      // }
    },
    // 购物车的个数
    shoppingNumber() {
      let numberData = this.getLocalStorage("orderList");

      if (numberData == null) {
        this.shoppingShow = false;
      } else if (numberData.length == 0) {
        this.shoppingShow = false;
      }
      if (numberData && numberData.length != 0) {
        this.shoppingShow = true;
        this.shoppingNum = numberData.length;
      }
    },
    popupBoxClose() {
      this.beforeDestroy();
    },
    // 添加 不让body滑动
    beforeCreate() {
      // document
      //   .querySelector("body")
      //   .setAttribute(
      //     "style",
      //     "overflow: hidden!important;position:fixed;top: 0;left: 0; max-width: 100%;"
      //   );
    },
    //销毁前清除
    beforeDestroy() {
      // document.querySelector("body").removeAttribute("style");
    },
    numberShowListGb() {
      if (this.removeArr.length) {
        this.removeLocalStorage(this.removeArr);
      }
      this.beforeDestroy();
    },
    // 监听页面的高度
    windowScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop >= 700 ? (this.bottonBtn = true) : (this.bottonBtn = false);
    },

    selectQuestion() {
      let el = document.getElementById("orderDetails");
      window.scrollTo({
        top: el.offsetTop,
        behavior: "smooth",
      });
    },
  },
  mounted() {
    // ios 阻止双击 向上滑动问题
    (function () {
      var agent = navigator.userAgent.toLowerCase(); //检测是否是ios
      var iLastTouch = null; //缓存上一次tap的时间
      if (agent.indexOf("iphone") >= 0 || agent.indexOf("ipad") >= 0) {
        document.body.addEventListener(
          "touchend",
          function (event) {
            var iNow = new Date().getTime();
            iLastTouch =
              iLastTouch ||
              iNow + 0.3 /** 第一次时将iLastTouch设为当前时间+1 */;
            var delta = iNow - iLastTouch;
            if (delta < 500 && delta > 0) {
              event.preventDefault();
              return false;
            }
            iLastTouch = iNow;
          },
          false
        );
      }
    })();
    // 页面初始化调用数据
    this.userlocations();
    window.addEventListener("scroll", this.windowScroll);
  },
};
</script>

<style scoped>
.fl {
  float: left;
}
.fr {
  float: right;
}
/* 归属地选择 */
.choose-box {
  width: 100%;
  margin: auto;
  padding-bottom: 0.1rem;
  padding-top: 0.1rem;
  background-color: #1a1107;
}
.ditionCenter-box {
  width: 90%;
  margin: auto;
  background-color: #1a1207;
  border: 0.01rem solid #fff;
  border-radius: 0.199rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}
.address-box {
  width: 90%;
  height: 0.9rem;
  margin: 0.1rem auto;
  border-radius: 0.1rem;
  line-height: 0.9rem;
  font-size: 0.35rem;
  color: #fff;
  background-color: #1a1107;
  border: 0.035rem solid #fff;
}

.address-text {
  width: 100%;
  height: 100%;

  border-radius: 0.625rem;
}
.address-address-text,
.address-text span {
  font-family: "细体楷书";

  margin-left: 0.1rem;
}
.address-address-text {
  font-size: 0.4rem;
  font-weight: 600;
}
.address {
  width: 90%;
  height: 100%;
}
.address-icon {
  width: 10%;
  height: 100%;
}
/* end */
/* 跳动动画 */
.submit-ditu-icon,
.submit-guanbi-icon {
  font-size: 0.45rem;
}

.submit {
  width: 85%;
  height: 0.9rem;
  margin: auto;
  margin-top: 0.3rem;
  border-radius: 0.2rem;
  background-size: 0.5rem 0.5rem;
  background-color: #fff;
  -webkit-animation-name: scaleDraw;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 5s;
}
@keyframes scaleDraw {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
}
.triangle {
  position: absolute;
  width: 0;
  left: 0.5rem;
  top: -0.2rem;
  height: 0;
  border-left: 0.2rem solid transparent;
  border-right: 0.2rem solid transparent;
  border-bottom: 0.2rem solid #fff;
  z-index: 999;
}
.content {
  width: 100%;
  text-align: center;
  height: 0.9rem;
  font-size: 0.1rem;
  line-height: 0.9rem;
}
.content-text {
  margin-left: 1rem;
  height: 0.6rem;
  line-height: 0.9rem;
  font-family: "\5FAE\8F6F\96C5\9ED1", Courier, monospace;
  font-size: 0.35rem;
  font-weight: 350;
  color: #515a6e;
  text-align: center;
  letter-spacing: 0.05rem;
}
.content-text-icon {
  position: relative !important;
  width: 0.5rem;
  height: 0.5rem;
  left: 0.7rem;
  top: 50%;
  line-height: 0;
  text-align: center;
  /* line-height: inherit; */
  font-size: 0.11rem !important;
  color: #000;
}
.content-close {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;

  /* margin-top: 0.1rem; */
  right: 0.4rem;
}
/* end */
/* 搜索 */

.search-input {
  width: 92% !important;
  height: 0.9rem !important;
  border-radius: 0.1rem !important;
  margin: auto;
  border: 0rem;
  padding: 0 !important;
  margin-top: 0.2rem !important;
  font-size: 0.35rem !important;
  width: 400rem;
  border-radius: 0.3rem;
  color: #1d1e1f;
  text-align: center;
  line-height: 0.9rem;
}
.search-button {
  float: right;
  width: 2.5rem;
  height: 0.9rem;
  color: #000 !important;
  border-radius: 0.1rem !important;
  font-size: 0.35rem !important;
}
/* end */
/* AAAA BBAA */
.beautiful-box {
  overflow: hidden;
  width: 90%;
  margin: auto;
  margin-top: 0.2rem;
  border-right: 0.015rem;
  margin-bottom: 0.15rem;

  border: 0.01rem solid #fff;
  border-radius: 0.1rem;
}
.beautiful-box-color {
  background-color: #1a1206;
  overflow: hidden;
  border-radius: 0.125rem;
}

.beautiful {
  /* width: 32.563333%; */
  /* width: 2.651rem; */
  width: 2.637rem;
  
  height: 0.9rem;
  font-size: 0.25rem;
  line-height: 0.9rem;
  text-align: center;
  color: #fff;
  border: 0.01rem solid #1a1206;
  border-radius: 0.1rem;
  background-color: #1a1206;
}
.beautiful_color {
  background-color: #fae0af;
  color: #000;
}
.beautiful_text_num {
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
  color: #fff;
}
.beautiful_text {
  width: 20%;
  font-size: 0.25rem;
  font-weight: 500;
  font-family: "微软雅黑";
}
.beautiful_num {
  width: 16%;
  font-size: 0.25rem;
  border-radius: 0.1rem;
  /* position: absolute; */
}
/* end */
.popupbox {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  background-color: rgb(247, 248, 250);
}
/* 号码展示 */
.numberShow-box {
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
}
.setPhoneBeautiful {
  box-shadow: inset 0 0 0.2rem red;
}
.numberShow {
  position: relative;
  width: 45.5%;
  height: 1.6rem;
  margin-left: 0.3rem;
  border-radius: 0.15rem;
  margin-bottom: 0.2rem;
  background-color: #fff;
}
.numberShow-icon {
  position: absolute;
  right: 0;

  color: #fff;
  font-size: 0.5rem;
}
.setNumberShow_icon {
  color: red;
}
.numberShowList {
  width: 100%;
  z-index: 2016;
  height: 100%;
}
.flnumberShow-hm {
  width: 100%;
  margin-top: 0.2rem;
  padding-bottom: 0.15rem;
  text-align: center;
  font-size: 0.55rem;
  font-family: 400;
}
.set-phone-red {
  color: #ff7900;
}
.set-phone-blue {
  color: #00b0f0;
}
.set-phone-black {
  color: black;
}
.flnumberShow-content {
  width: 100%;
  padding: 0 0.30666667rem 0.13333333rem;
  font-size: 0.4rem;
}
.flnumberShow-jiage {
  display: inline-block;
  float: left;
  width: 0.6rem;
  color: #999;
  text-decoration: line-through;
}
.flnumberShow-text {
  display: block;
  float: right;
  margin-right: 0.5rem;
  color: #fe4365;
}
.numberShows-data {
  width: 90%;
  margin: auto;
  height: 1rem;
  text-align: center;
  font-size: 0.3rem;
  color: #fff;
  line-height: 0.1rem;
}
/* end */
/* 分页 */
.paging-box {
  display: flex;
  justify-content: space-around;
  overflow: hidden;
  width: 100%;
  margin-top: 0.6rem;
}
.paging-btn-fl {
  width: 36%;
  height: 1rem;
  font-size: 0.4rem;
  font-weight: 600;
  margin-left: 0.3rem;
  margin-right: 0.2rem;
  border-radius: 0.6rem;
  color: #000 !important;
  background-color: #f1d5a5;
  border-color: #f1d5a5;
  font-family: STXihei, "华文细黑";
}
.btn-icon-fr,
.btn-icon-fl {
  font-size: 0.6rem;
  line-height: 0.9rem;
}
.but-fr {
  display: flex;
  justify-content: space-between;
}
.paging-btnimage {
  position: absolute;
  width: 42%;
  height: 1rem;
  border-radius: 0.5rem;
  background-color: rgba(0, 71, 152, 0.7);
}
/* .paging-btn-fl-img {
  display: inline-block;
  width: 1.2rem;
  height: 0.6rem;
  margin-top: 0.01rem;
} */
.paging-box-xia-l {
  margin-left: 0.3rem;
  line-height: 0.8rem;
}
.paging-box-xia-r {
  margin-right: 0.3rem;
  line-height: 0.8rem;
}
/* end */
.checkbox {
  width: 90%;
  display: flex;
  margin: auto;

  margin-top: 0.5rem;
  justify-content: space-evenly;
  flex-direction: column;
  flex-wrap: wrap;
}

.text_st {
  display: flex;
  width: 95%;
  height: 0.4rem;

  margin: auto;
  padding-top: 0.5rem;
  color: #fff;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-family: "KaiTi";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.text_st span {
  width: 90%;
  float: left;

  font-size: 0.27rem;
  line-height: 0.4rem;
  font-weight: blod;
}
.text_st-icon {
  float: left;
  height: 0.4rem;
  line-height: 0.45rem !important;
  margin-right: 0.1rem;
  font-size: 0.35rem !important;
}
</style>